<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
        textarea{
            font-size: 18px;
            vertical-align: text-top;
        }
        .fc{
            color: red;
        }
        .fs{
            font-size: 20px;
        }
        .border{
            border: 1px solid black;
        }
        .success{
            background-color: green;
        }
        .error{
            background-color: red;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1、boolean 类型属性的绑定
                vue 修改了部分类型数据的转换规则
                - String 不论是否为空字符串，统一转换为 true
                - Number 不论取值是否为 0 ，统一转换为 true
                - 其它类型数据遵循JS规则
        -->
        <textarea cols="30" rows="10">可编辑</textarea>
        <textarea cols="30" rows="10" disabled>禁用</textarea>
        <hr>
        <!-- <textarea name="" id="" cols="30" rows="10" v-bind:disabled></textarea> -->
        <textarea name="" id="" cols="30" rows="10" :disabled=" isDisabled "></textarea>
        <input type="button" value="切换文本框的操作状态" @click=" isDisabled=!isDisabled ">
        <hr>
        <textarea name="" id="" cols="30" rows="10" :disabled=" str ">{{ str }}</textarea>
        <input type="button" value="str=''" @click=" str='' ">
        <input type="button" value="str='非空'" @click=" str='非空' ">
        <input type="button" value="str=0" @click=" str=0 ">
        <input type="button" value="str=123" @click=" str=123 ">
        <hr>
        <!-- 
            2、class 属性的绑定
                - v-bind:class=" string|Array|Object "
                    string: 绑定的变量或者表达式最终提供 字符串数据必须 符合 class定义规则
                    Array: 可以通过数组绑定方式 完成对 一个元素的多个样式的调整
                        - 数组中的每个元素 都是一个独立 class名称，页面会自行循环拼接
                    Object: 取值对象模式可以通过 boolean类型数据控制样式的加载和删除
                        - key 用于定义 class样式名，value 取值结果为boolean变量或表达式
                        - 通过 true 表示样式需要定义 false 表示样式不需要定义
                - 和其它属性绑定不同，class的绑定可以和静态属性进行合并
        -->
        <p class="fc fs">class样式定义规则</p>
        <p :class=" classStr ">v-bind:class样式定义规则-string</p>
        <p  class="fs" 
            :class=" fontColor " 
            @click=" fontColor='fc' "
            :id=" idStr " 
            id="aa" 
        >v-bind:class样式定义规则-动静合并</p>
        <hr>
        <p>classStr1:{{ classStr1 }}</p>
        <p :class=" classStr1 ">v-bind:class样式定义规则-string</p>
        <p>classArr:{{ classArr }}</p>
        <p :class=" classArr ">v-bind:class样式定义规则-Array</p>
        <input type="button" value="添加fs" @click="addFs()">
        <input type="button" value="添加fc" @click="addFc()">
        <input type="button" value="添加booder" @click="addBorder()">
        <hr>
        <p :class="{
                    fc:msg.length>3,
                    fs:msg.length>6,
                    border:msg.length>12
                }"
        >{{ msg }}</p>
        <input type="text" 
            :class="{
                success:msg.length>0,
                error:msg.length<=0
            }"
            @input=" msg = $event.target.value "
        >
        <!-- 
            3、style 属性的绑定
             - v-bind:style=" string|Array|Object "
                    string: 取值为遵循CSS行内样式语法规则字符串
                    Object: 取值对象vue以css行内样式语法规则，对对象进行循环迭代拼接字符串
                        + key 表示样式名（连字符样式，a、以引号定义key，b、转小驼峰）
                        + value 对应样式的合法值
                    Array: 取值数组用于完成 多个对象定义规则的样式变量合并操作
            - 和其它属性绑定不同，style的绑定可以和静态属性进行合并
        -->
        <p>styleStr:{{ styleStr }}</p>
        <p :style="styleStr">v-bind:style绑定-string</p>
        <p>styleObj:{{ styleObj }}</p>
        <p :style="styleObj">v-bind:style绑定-Object</p>
        <p>styleArr:{{ styleArr }}</p>
        <p :style="styleArr">v-bind:style绑定-Array</p>
        <p>stylePadd:{{ stylePadd }}</p>
        <p :style=" styleObj ">styleObj</p>
        <p :style=" stylePadd ">stylePadd</p>
        <p :style=" [ styleObj,stylePadd ] ">styleObj:stylePadd</p>
        <hr>
        <p style="color:red" :style=" stylePadd ">动静合并</p>

    </div>
</body>
<script>
    // let obj = {
    //     "name":"tom",
    //     age:12
    // }
    let styleObj = {
        color:"red",
        "font-size":"20px"
    }
    let str = "";
    for (let key in styleObj) {
       str += key+":"+styleObj[key]+";"
    }
    console.log(str);

    new Vue({
        el:"#app",
        data:{
            isDisabled:false,
            str:"测试字符串",
            classStr:"fc fs",
            idStr:"ccc",
            fontColor:"",
            classStr1:"",
            classArr:[],
            msg:"",
            styleStr:"color:red;font-size:20px;",
            styleObj:{
                color:"red",
                "font-size":"20px",
                backgroundColor:"#cccccc"
            },
            styleArr:[
                "color:red",
                "font-size:20px"
            ],
            stylePadd:{
                padding:"10px"
            }
        },
        methods:{
            addFs(){
                this.classStr1 += " fs";
                this.classArr.push( 'fs' );
                this.classArr = Array.from(new Set(this.classArr)) ;
            },
            addFc(){
                this.classStr1 += " fc"
                this.classArr.push( 'fc' );
                this.classArr = Array.from(new Set(this.classArr)) ;

            },
            addBorder(){
                this.classStr1 += " border"
                this.classArr.push( 'border' );
                this.classArr = Array.from(new Set(this.classArr)) ;

            }
        }
        
    })
</script>
</html>